<template>
  <div style="height: 100%">
    <div>
      <h1 class="text-center mb-4">设置</h1>

      <form id="feeSettings.Form">
        <div class="form-group">
          <label for="feeWithin1Hour" style="width: 100%;
    text-align: left;">1小时(含)内费用（元/车次）</label>
          <input type="number" class="form-control" id="feeWithin1Hour" v-model="feeSettings.feeWithin1Hour" required />
        </div>
        <div class="form-group">
          <label for="feeAfter1Hour" style="width: 100%;
    text-align: left;">1小时后费用（元/半小时/车次）</label>
          <input type="number" class="form-control" id="feeAfter1Hour" v-model="feeSettings.feeAfter1Hour" required />
        </div>
        <div class="form-group">
          <label for="feeWithin24Hours" style="width: 100%;
    text-align: left;">24小时(含)内最高费用（元/车次）</label>
          <input type="number" class="form-control" id="feeWithin24Hours" v-model="feeSettings.feeWithin24Hours"
            required />
        </div>
        <div style="width: 100%;
    text-align: left;margin-top: 10px">
          <button type="button" class="btn btn-primary" @click="saveSettings">
            保存设置
          </button>
        </div>

      </form>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
const message = ref("");
let feeSettings = ref({
  feeWithin1Hour: 5, // 默认值
  feeAfter1Hour: 2, // 默认值
  feeWithin24Hours: 50, // 默认值
})
const saveSettings = async () => {
  if (feeSettings.value.feeWithin1Hour < 0 || feeSettings.value.feeAfter1Hour < 0 || feeSettings.value.feeWithin24Hours < 0) {
    ElMessage.warning("请输入非负数")
    return
  }
  try {
    // 将费用设置发送到后端
    const response = await axios.post(
      "http://localhost:8000/plates/save_fee_settings",
      feeSettings.value
    );
    alert("保存成功");
    console.log("保存成功:", response.data);
  } catch (error) {
    console.error("保存失败:", error);
    alert("保存失败，请稍后重试。");
  }
}
const loadSettings = async () => {
  try {
    // 从后端加载费用设置
    const response = await axios.get(
      "http://localhost:8000/plates/load_fee_settings"
    );
    feeSettings.value.feeWithin1Hour = response.data.fee_within_1_hour;
    feeSettings.value.feeAfter1Hour = response.data.fee_after_1_hour;
    feeSettings.value.feeWithin24Hours = response.data.fee_within_24_hours;

    console.log("加载成功:", response.data);
  } catch (error) {
    console.error("加载失败:", error);
    alert("加载失败，请稍后重试。");
  }
}
onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
